<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<jsp:include page="/web/inc/header"/>
<section>
    <div class="wrap">
        <div id="seach">
            <div id="logo"><a href="http://fenlicx.qinglab.cn" title="垃圾分类查询">分类查询</a>
            </div>

        </div>


        <article class="article">
            <div class="title">
                <h1>添加垃圾</h1><a style="cursor:pointer;float: right;" onclick="history.go(-1)">返回列表</a>
            </div>


            <form id="submitForm" action="<%=path%>/web/garbage/insert" method="post" enctype="multipart/form-data">
                <div class="publish">
                    <dl>
                        <dt>选分类</dt>
                        <dd>
                            <select id="type" name="garbageType.id">
                                <option value="">垃圾类型</option>
                                <c:forEach items="${requestScope.garbageTypes}" var="garbageType">
                                    <option value="${garbageType.id}">${garbageType.title}</option>
                                </c:forEach>
                            </select>
                        </dd>
                    </dl>

                    <dl>
                        <dt>选材质</dt>
                        <dd>
        <span>
          <select class="texture">
                                    <option value="">垃圾材质</option>
                                    <c:forEach items="${requestScope.textures}" var="texture">
                                        <option value="${texture.id}">${texture.title}</option>
                                    </c:forEach>
                                </select>
            <select  class="nextTexture">
                                    <option value="">具体材质</option>
                                </select>
            <a id="definition" href="script:void(0);">自定义材质</a>

        </span>

                            <span id="childrenTexture">

        </span>
                        </dd>

                    </dl>
                    <dl id="other" style="display: none;">
                        <dt>一级材质</dt>
                        <dd>
                            <input id="text1" data-id="null"  type="text" aria-label="输入具体垃圾名" placeholder="请输入一级材质"><a id="add1" href="script:void(0);">添加</a><br><br>
                        </dd>
                        <dt>二级材质</dt>
                        <dd>
                            <input id="text2" data-id="null" type="text" aria-label="输入具体垃圾名" placeholder="请输入二级材质（可不填）"><a id="add2" href="script:void(0);">添加</a><br><br>
                        </dd>
                    </dl>

                    <dl>
                        <dt>名称</dt>
                        <dd>
                            <input id="garbageName" type="text" name="name" aria-label="输入具体垃圾名" placeholder="输入具体垃圾名"><br><br>
                         </dd>
                        <dt>图片</dt>
                        <dd>
                             <span><input  type="file" id="picture" name="file"></span><br><br>
                        </dd>
                    </dl>
                    <dl>
                    </dl>
                    <div class="submit">
                        <input type="submit" onclick="checkAndSubmit()" value="提交">
                        <input type="reset" value="重置">
                    </div>
                </div>

                <input type="hidden" name="userinfo.id" value="${sessionScope.userinfo.id}">
                <input type="hidden" name="texture.id" id="chilText" value="">
            </form>


        </article>
    </div>
</section>
<script src="<%=path%>/static/js/layui/layui.all.js"></script>
<script src="<%=path%>/static/js/jquery-3.3.1.min.js"></script>
<script>

    //给下拉列表框添加change事件，根据一级材质得到二级材质
    $(function () {
        $(".texture").change(function () {
            var textureId = $(this).val();
            $.get("<%=path%>/web/garbage/nextTextureData", {textureId: textureId}, function (mes) {
                $(".nextTexture").html(mes);
            });
        });
    });

    $(function () {
        var pid=null;
        var title=null;
        //调用检查表单的方法
        $("#submitForm").submit(checkForm);
        //显示自定义区域
        $("#definition").click(function () {
            $("#other").css("display","block");
        });
        //添加一级材质
        $("#add1").click(function () {
            title=$("#text1").val();
            pid=0;
            if(title==""){
                layer.msg("请填写材质名称",{icon:5});
                return;
            }
            insertTexture();
        });
        //添加二级材质
        $("#add2").click(function(){
            title=$("#text2").val();
            pid=$("#text1").data("id");
            if(pid==null||$("#text1").val()==""){
                layer.msg("请添加一级材质后再填写二级材质",{inco:5});
                return;
            }
            if(title==""){
                layer.msg("请填写二级材质名称",{inco:5})
                return;
            }
            insertTexture();

        })

        //往数据库加入材质，返回材质的id，
        function insertTexture() {
            $.ajax({
                url:"<%=path%>/web/garbage/insertTexture",
                type:"POST",
                sysnc:"false",
                data:{pid:pid,title:title},
                success:function (data){
                    if(pid==0)//返回的是一个一级材质的id
                    {
                        $("#text1").data("id",data);
                        layer.msg("添加成功！",{inco:6});
                    }
                    else{//返回的是二级材质的id
                        $("#text2").data("id",data);
                        layer.msg("添加成功！",{inco:6});
                    }
                }
            })
        }



    });

    //检查表单
    function checkForm() {
        var type = $("#type").val();
        var ptexture=$(".texture").val();
        var texture = $(".nextTexture").val();
        var garbageName = $("#garbageName").val();
        var picture = $("#picture").val();
        var text1Id=$("#text1").data("id");
        var text2Id=$("#text2").data("id");

        if(type==""){
            layer.msg("请选择所属类型",{icon:5});
            return false;
        }
        if(text1Id !=null){//说明选择了自定义材质
            if(text2Id !=null){//自定义了二级材质
                $("#text2").val(text2Id);
                $("#text2").attr("name","texture.id");
            }
            else {//没有自定义二级材质
                $("#text1").val(text1Id);
                $("#text1").attr("name","texture.id");
            }
        }else
            {//通过下来列表框选择材质
            if(ptexture==""){
                layer.msg("请选择垃圾材质",{icon:5});
                return false;
            }
            if(texture==""){
                $(".texture").attr("name","texture.id");
            }
            else{
                $(".nextTexture").attr("name","texture.id");
            }
        }
        if(garbageName == ""){
            layer.msg("请填写垃圾名称",{icon:5});
            return false;
        }
        if(picture == ""){
            layer.msg("请选择图片",{icon:5});
            return false;
        }
        return true;
    }

</script>

<jsp:include page="/web/inc/footer"/>
